var EnergyItem = function () {
  var template = /* html */ `
    <div class="energy-item has-energy">
      <div class="energy-item-content">
        <div class="energy-item-baseinfo">
          <table cellspacing="0" cellpadding="0">
            <colgroup>
              <col width="27%">
              <col width="23%">
              <col width="27%">
              <col width="23%">
            </colgroup>
            <tr>
              <td>仪表名称</td>
              <td>{{energy.name}}</td>
              <td>当日用量({{energy.unit}})</td>
              <td>{{formatNumber(energy.todayUseCount,2)}}</td>
            </tr>
            <tr>
              <td>当月最高值({{energy.unit}})</td>
              <td>{{formatNumber(energy.monthMaxCount,2)}}</td>
              <td>当年最高值({{energy.unit}})</td>
              <td>{{formatNumber(energy.yearMaxCount,2)}}</td>
            </tr>
            <tr>
              <td>位置</td>
              <td>{{energy.address}}</td>
              <td>所属车间</td>
              <td>{{energy.workShopName}}</td>
            </tr>
          </table>
        </div>
        <div class="energy-item-chart-content">
          <img v-if="energy.imgUrl!==''" :src="formatImgUrl(energy.imgUrl)" class="energy-img">
          <div class="energy-item-chart"></div>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      energy: Object,
      isShow: {
        type: Boolean,
        default: true
      },
      chartStartDate: String
    },

    data: function () {
      return {
        chartOption: null
      };
    },

    watch: {
      isShow: function (value) {
        if (value) {
          this.showChart();
        }
      },

      maxNum: function () {
        if (this.isShow) {
          this.refreshAxis();
        }
      },

      chartStartDate: function () {
        if (this.isShow) {
          this.refreshLineChart();
        }
      },

      'energy.energyRecordList': function () {
        if (this.isShow) {
          this.refreshLineChart();
        }
      },

      'energy.indicationNum': function () {
        if (this.isShow) {
          this.refreshIndicationChart();
        }
      }
    },

    computed: {
      maxNum: function () {
        var energyRecordList = this.energy.energyRecordList;
        var maxNum;
        if (energyRecordList.length === 0) {
          maxNum = 0.5;
        } else {
          var maxRecord = _.maxBy(energyRecordList, 'value');
          maxNum = maxRecord.value;
          if (maxNum === 0) {
            maxNum = 0.5;
          } else {
            maxNum *= 1.2;
            if (maxNum > 5) {
              maxNum = Math.ceil(maxNum / 5) * 5;
            } else {
              maxNum = _.ceil(maxNum, 1);
            }
          }
        }
        return maxNum;
      },

      energyName: function () {
        var type = this.energy.type;
        var energyName = '';
        switch (type) {
          case 'electric':
            energyName = '电表(kw·h)';
            break;
          case 'gas':
            energyName = '气表(m³)';
            break;
          case 'water':
            energyName = '水表(m³)';
            break;
        }
        return energyName;
      }
    },

    mounted: function () {
      if (this.isShow) {
        this.showChart();
      }
      var self = this;
      $(this.$el).find('.energy-item-chart').resize(function () {
        var chart = self.getChartByDom();
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    methods: {
      getChart: function () {
        var chart = this.getChartByDom();
        if (chart === undefined) {
          var $chart = $(this.$el).find('.energy-item-chart');
          chart = echarts.init($chart[0]);
        }
        return chart;
      },

      showChart: function () {
        chart = this.getChart();
        var option = this.getOption();
        chart.setOption(option);
      },

      getOption: function () {
        var energy = this.energy;
        var records = this.chartRecords();
        var indicationNum = energy.indicationNum;
        indicationNum = _.round(indicationNum, 1);

        var option = {
          dataset: {
            source: records
          },
          grid: {
            right: 20,
            left: 43,
            bottom: 25,
            top: 25
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              interval: 0,
              formatter: function (value) {
                return moment(value).format('MM-DD');
              }
            }
          },
          yAxis: {
            type: 'value',
            max: this.maxNum,
            name: `${energy.chartName}(${energy.chartUnit})`,
            nameTextStyle: {
              fontSize: 14
            },
            nameGap: 8,
            minInterval: 0.5,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (param) {
              var data = param.data;
              var value = data.value;
              value = _.round(value, 4);
              var unit = energy.chartUnit;
              var msg = `${data.dayTime}<br>${energy.chartName}:${value}${unit}`;
              return msg;
            }
          },
          series: [{
            type: "line",
            id: "energyDetail",
            dimensions: ['dayTime', 'value'],
            z: 10,
            lineStyle: {
              color: '#6CF5F2'
            },
            itemStyle: {
              color: '#6CF5F2'
            }
          }, {
            type: "gauge",
            name: "示数",
            id: "indicationNum",
            center: ['80%', 90],
            radius: 70,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#2ec7c9']
                ],
                width: 2,
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 15,
              lineStyle: {
                color: 'auto'
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              offsetCenter: [0, '-20%'],
              fontSize: 18,
              color: '#2ec7c9'
            },
            detail: {
              fontSize: 16
            },
            data: [{
              value: indicationNum,
              name: this.energyName
            }]
          }]
        };
        return option;
      },

      refreshLineChart: function () {
        var chart = this.getChartByDom();
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var records = this.chartRecords();
        chart.setOption({
          dataset: {
            source: records
          }
        });
      },

      refreshAxis: function () {
        var chart = this.getChartByDom();
        if (chart === undefined) {
          this.showChart();
          return;
        }

        chart.setOption({
          yAxis: {
            max: this.maxNum
          }
        });
      },

      refreshIndicationChart: function () {
        var chart = this.getChartByDom();
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var indicationNum = this.energy.indicationNum;
        indicationNum = _.round(indicationNum, 1);
        chart.setOption({
          series: [{
            id: 'indicationNum',
            data: [{
              value: indicationNum,
              name: this.energyName
            }]
          }]
        });
      },

      chartRecords: function () {
        var records = this.energy.energyRecordList;
        var chartStartDate = this.chartStartDate;
        if (chartStartDate !== undefined) {
          var index = _.findIndex(records, {
            dayTime: chartStartDate
          });
          if (index > -1) {
            records = records.slice(index, index + 10);
          }
        }
        return records;
      },

      formatNumber: function (value, decimal) {
        return SysUtil.decimalNumber(value, decimal);
      },

      getChartByDom: function () {
        var $chart = $(this.$el).find('.energy-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        return chart;
      }
    },

    template: template
  };
}();